<template>
	<view class="release">
		<!-- 商品分类 -->
		<view class="type">
			<view class="type-select">
				<view>
					<view class="title">
						<text><text style="color: red;">* </text>商品总分类:</text>
					</view>
					<view class="type">
						<view class="head-box" @click="issueFlag = !issueFlag">
							<view class="show-box">
								<text class="button">{{catename1}}</text>
								<image src="/static/imgs/myStore/select.png" class="item-img"></image>
							</view>
							<view class="item-box" v-if="issueFlag">
								<view v-for="(item) in cate1" :key="item.cateid" @click="select1(item.cateid)">
									{{item.catename}}
								</view>
							</view>
						</view>
					</view>
					<view class="info">
						<text>商品总分类内容写入分类页内容</text>
					</view>
				</view>

				<view>
					<view class="title1">
						<text><text style="color: red;">* </text>店内商品分类:</text>
					</view>
					<view class="type">
						<view class="head-box" @click="shopFlag=!shopFlag">
							<view class="show-box">
								<text class="button">{{catename2}}</text>
								<image src="/static/imgs/myStore/select.png" mode="aspectFill" class="item-img"></image>
							</view>
							<view class="item-box" v-if="shopFlag">
								<view v-for="(item) in cate2" :key="item.cateid" @click="select2(item.cateid)">
									{{item.catename}}
								</view>
							</view>
						</view>
					</view>
					<view class="info">
						<text>商品分类内容</text>
						<text>活动专区 正价爆品 组合促销</text>
					</view>
				</view>

			</view>
			<!-- 商品图片视频 -->
			<view class="img">
				<view class="img-box">
					<text><text style="color: red;">* </text>主图</text>
					<scroll-view class="img-list" :scroll-x="true">
						<view class="list" :style="imgStyle">
							<sunuiupimg @change="getImageInfo($event)" :upload_auto="true" :upimg_move="true" ref="upimg"></sunuiupimg>
						</view>
					</scroll-view>
					<view class="img-item">
						<image src="/static/imgs/myStore/img.png" @click.stop="chooseImage(0)"></image>
						<text>{{goodsImgList.length}}/8</text>
					</view>
				</view>
				<view class="video-box">
					<text><text style="color: red;">* </text>视频</text>
					<view class="video-item1" v-for="(item,index) in videoList" :key="index">
						<video class="video" :src="item" controls></video>
						<view class="remove" @click="removeVideo(index)">
							<text class="iconfont remove-img">&#xe628;</text>
						</view>
					</view>
					<view class="video-item">
						<image src="/static/imgs/myStore/video.png" @click="goodVideo"></image>
						<text>{{videoList.length}}/1</text>
					</view>
				</view>
			</view>
			<view class="goodsName">
				<text><text style="color: red;">*</text>标题</text>
				<input type="text" maxlength="20" v-model="prodesc" placeholder="限制20个字" />
			</view>
			<view class="goodsPrice">
				<text><text style="color: red;">*</text>商品价格</text>
				<view class="priceTitle">
					<text>注：系统自动折算后价格(原价*折扣)</text>
					<view class="price">
						<view>
							<text>到店价:</text>
							<input type="number" @blur="oriBlur" v-model="originPrice" maxlength="7" />
							<text class="RMB">元</text>
						</view>
						<view>
							<text>邻里价:</text>
							<input type="text" v-model="count" maxlength="7" disabled="true" />
							<text class="RMB">元</text>
						</view>
						<view v-if="!fiveFlag">
							<text>折扣:</text>
							<input type="number" @blur="zkBlur" v-model="rebate" maxlength="3" />
							<text class="RMB">折</text>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="activity">
			<text>商品活动（选填）</text>
			<view class="limit">
				<text>限购:</text>
				<view class="select-region">
					<radio-group @change="onBuy" class="group">
						<label>
							<view class="radio">
								<radio value="0" style="transform:scale(0.7);" :checked="limit1.ischecked" /><text>毎账号每天限购</text>
								<input type="number" maxlength="5" v-model="limit1.number" placeholder="（限购数量）" placeholder-style="font-size: 20upx;color: #999" />
							</view>
						</label>
						<label>
							<view class="radio">
								<radio value="1" style="transform:scale(0.7);" :checked="limit2.ischecked" /><text>毎账号每单限购</text>
								<input type="number" maxlength="5" v-model="limit2.number" placeholder="（限购数量）" placeholder-style="font-size: 20upx;color: #999" />
							</view>
						</label>
						<label>
							<view class="radio">
								<radio value="2" style="transform:scale(0.7);" :checked="limit3.ischecked" /><text>不参加限购</text>
								<!-- <input type="number" maxlength="5" v-model="limit2.number" placeholder="（限购数量）" placeholder-style="font-size: 20upx;color: #999" /> -->
							</view>
						</label>
					</radio-group>
				</view>
			</view>
			<!-- 秒杀 -->
			<view class="other" v-if="cateId2 == 5">
				<text>其他:</text>
				<view class="select-region">
					<view>

						<text>秒杀<text>(秒杀时间段设置)</text></text>
						<view class="timeSetting">
							<view class="startAnEnd">
								<text>开始:</text>
								<text class="input" @click="onShowDatePicker(1)">{{startText}}</text>
								<mx-date-picker :show="ms1showPicker" type="datetime" @confirm="onSelected($event,1)" @cancel="onSelected" />
							</view>
							<view class="startAnEnd">
								<text>结束:</text>
								<text class="input" @click="onShowDatePicker(2)">{{endText}}</text>
								<mx-date-picker :show="ms2showPicker" type="datetime" @confirm="onSelected($event,2)" @cancel="onSelected" />
							</view>

						</view>
					</view>
				</view>
			</view>
			<!-- 限时购 -->
			<view class="other" v-if="cateId2 == 19">
				<text>其他:</text>
				<view class="select-region">
					<view>
						<text>限时购<text>(自动下架时间设置)</text></text>
						<view class="timeSetting">
							<view class="startAnEnd">
								<text>开始:</text>
								<text class="input" @click="onShowDatePicker(1)">{{startText}}</text>
								<mx-date-picker :show="ms1showPicker" type="datetime" @confirm="onSelected($event,1)" @cancel="onSelected ($event,1)" />
							</view>
							<view class="startAnEnd">
								<text>结束:</text>
								<text class="input" @click="onShowDatePicker(2)">{{endText}}</text>
								<mx-date-picker :show="ms2showPicker" type="datetime" @confirm="onSelected($event,2)" @cancel="onSelected ($event,2)" />
							</view>

						</view>
					</view>
				</view>
			</view>
			<!-- 拼团 -->
			<view class="other" v-if="cateId2 == 8">
				<text>其他:</text>
				<view class="select-region">
					<view>
						<text>拼团<text>(拼团展示时间设置)</text></text>
						<view class="timeSetting">
							<view class="startAnEnd">
								<text>开始:</text>
								<text class="input" @click="onShowDatePicker(1)">{{startText}}</text>
								<mx-date-picker :show="ms1showPicker" type="datetime" @confirm="onSelected($event,1)" @cancel="onSelected($event,1)" />
							</view>
							<view class="startAnEnd">
								<text>结束:</text>
								<text class="input" @click="onShowDatePicker(2)">{{endText}}</text>
								<mx-date-picker :show="ms2showPicker" type="datetime" @confirm="onSelected($event,2)" @cancel="onSelected($event,2)" />
							</view>
						</view>
					</view>

					<view class="ot-footer">
						<text>成团时间限制：</text>
						<input type="number" v-model="groupTime" maxlength="5" style="width: 70upx;" placeholder="30" placeholder-style="font-size: 20upx; color: #999" />
						<text>分钟，成团人数：</text>
						<input type="number" v-model="groupNum" maxlength="3" style="width: 40upx;" placeholder="10" placeholder-style="font-size: 20upx; color: #999" />
						<text>人</text>
					</view>
				</view>


			</view>

			<!-- 预购 -->
			<view class="other" v-if="cateId2 == 20">
				<text>其他:</text>
				<view class="select-region">
					<view>
						<text>预购<text>(发货时间设置)</text></text>
						<view class="timeSetting">
							<view class="startAnEnd">

								<text class="input" @click="onShowDatePicker(3)">{{deliverytime}}</text>
								<mx-date-picker :show="ygshowPicker" type="datetime" @confirm="onSelected($event,3)" @cancel="onSelected($event,3)" />
							</view>


						</view>

					</view>
				</view>

			</view>

			<view class="send" v-if="!fiveFlag">
				<text>参与满减:</text>
				<radio-group @change="onGift">
					<label>
						<radio value="1" :checked="isGift == 1" style="transform:scale(0.5); margin-left: 20upx;" /><text>是</text></label>
					<label>
						<radio value="2" :checked="isGift == 2" style="transform:scale(0.5); margin-left: 60upx;" /><text>否</text></label>
				</radio-group>
			</view>

		</view>

		<view class="infos">
			<text>商品简介<text style="color: red;">（必填项*）</text></text>
			<view class="box">
				<checkbox-group @change="checkboxChange">
					<view class="checkbox" v-for="(item, index) in checkList" :key="index">
						<text style="color: red;margin-left: -10upx;" v-if="item.isSelect">*</text>
						<!-- <text style="color: red;" v-else></text> -->
						<label class="uni-list-cell uni-list-cell-pd">
							
							<checkbox style="transform:scale(0.5);" :value="item.name" :checked="item.checked" />
							{{ item.name }}
						</label>
						<!-- number -->
						<input type="text" class="input" v-model="item.text" maxlength="10"/>
						<!-- text -->
						<!-- <input v-show="checkList2Type[index] == 'number'" type="text" class="input" v-model="item.text" maxlength="10" /> -->
					</view>
				</checkbox-group>
			</view>


			<view class="img mt">
				<text><text style="color: red;">* </text>产品详情介绍图</text>
				<view class="img-box">

					<scroll-view class="img-list" :scroll-x="true">
						<view class="list" :style="imgStyle">
							<sunuiupimg2 @change="getImageInfo2($event)" :upload_auto="true" :upimg_move="true" ref="upimg2"></sunuiupimg2>
						</view>
					</scroll-view>
					<view class="img-item">
						<image src="/static/imgs/myStore/img.png" @click.stop="chooseImage(2)"></image>
						<text>{{goodsImgList2.length}}/8</text>
					</view>
				</view>
			</view>
			<view class="btn" @click="onConfirm">
				<text>确认发布</text>
			</view>
		</view>
	</view>
</template>
<script>
	var _self;
	import sunuiupimg from '@/components/sunui-upimg/sunui-upimg.vue';
	import sunuiupimg2 from '@/components/sunui-upimg/sunui-upimg2.vue';
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			sunuiupimg,
			sunuiupimg2,
			MxDatePicker
		},

		mounted() {
			this.$refs.upimg.upload_count = 8;
			this.$refs.upimg.upload_img_wh = 110;
			this.$refs.upimg.upload_cache_list = [];
			this.$refs.upimg2.upload_count = 8;
			this.$refs.upimg2.upload_img_wh = 110;
			this.$refs.upimg2.upload_cache_list = [];

		},
		data() {
			return {
				fiveFlag: false, // 9.9专区的标识
				productId: '', // 商品ID
				cate1: [], // 分类1 列表
				cateId1: '', // 分类1 ID

				cate2: [], // 分类2 列表
				cateId2: '', // 分类2 ID 

				catename1: '请选择', // 分类1，界面显示
				catename2: '请选择', // 分类2，界面显示



				limit1: { // 限购1
					ischecked: false,
					number: '',
				},
				limit2: { // 限购2
					ischecked: false,
					number: '',
				},
				limit3: { // 不参与限购
					ischecked: false,
					number: '',
				},
				LL: {}, // 经纬度

				prodesc: '', // 标题
				originPrice: '', // 原价
				rebate: '', // 折扣
				count: 0, // 现价
				goodsImgList: [], //  主图 图片上传后的路径
				goodsImgList2: [], // 产品详情 上传后的路径

				videoList: [], // 视频二进制列表
				videoUrls: [], // 视频上传到服务器后的地址

				shopFlag: false,

				issueFlag: false,
				current: '',
				otherCurrent: -1,
				distype: 0, // 优惠方式

				// 秒杀 start
				ms1showPicker: false,
				ms2showPicker: false,
				startText: '选择开始时间',
				endText: '选择结束时间',
				// 秒杀 end
				deliverytime: '选择预购时间', // 预购发货时间
				ygshowPicker: false,

				groupTime: '', // 团购时间
				groupNum: '', // 成团人数

				isGift: '', // 是否参与满赠
				checkList: [
					{name: '品牌：',isSelect:1, checked: false, text: ''},
					{name: '商品名称：', isSelect:2, checked: false, text: ''},
					{name: '商品编号：', checked: false, text: ''},
					{checked: false, name: '规格/单位：', isSelect:3, text: ''},
					{checked: false, name: '产地：', text: ''},
					{checked: false, name: '库存：', isSelect:4, text: ''},
					{checked: false, name: '可配送小区：', text: ''},
					{checked: false, name: '特卖数量：', isSelect:5, text: ''},
					{checked: false, name: '面料/质地/成分：', text: ''},
					{checked: false, name: '其他：', text: ''}
				],
				checkList2Type: ['text', 'text', 'text', 'number', 'text', 'number', 'text', 'text'],
				radioList: [{
						value: 1,
						name: '每账号每天限购'
					},
					{
						value: 2,
						name: '每账号每单限购',
						checked: 'true'
					},
				],

			}
		},
		onLoad(option) {
			this.productId = option.productId
			this.searchFoods();
			var _self = this;
			this.getCate(1);
			this.getCate(2);
			// #ifdef APP-PLUS
			this.LL = uni.getStorageSync('lph-ll');
			// #endif

		},
		computed: {
			// count: {
			// 	get() {
			// 		let a = this.originPrice * (this.rebate * 0.1);
			// 		// return this.$common.formatMoney(a);
			// 		return a;
			// 	},
			// 	set(val) {
					
			// 	}
			// }
		},
		methods: {
			oriBlur() { // 原价输入框失去焦点
				if(this.fiveFlag == 1) {
					this.count = 9.9;
				}else {
					// js精度问题，以后处理
					this.count = ((Number(this.rebate) * 100)  * (Number(this.originPrice) * 100)) / 1000;
				}
			},
			
			onGift(e) { // 满赠
				this.isGift = e.target.value;
			},
			onBuy(e) { // 处理限购
				let a = e.target.value;
				if (a == 0) {
					this.limit1.ischecked = true;
					this.limit2.ischecked = false;
					this.limit3.ischecked = false;
					this.limit2.number = '';
					return
				}else if(a == 2){
					this.limit3.ischecked = true;
					this.limit1.ischecked = false;
					this.limit2.ischecked = false;
					this.limit2.number = '';
					this.limit1.number = '';
				}else{
					this.limit2.ischecked = true;
					this.limit1.ischecked = false;
					this.limit3.ischecked = false;
					this.limit1.number = '';
				}
			},
			changeRadioBuy(e){
				console.log(e)
			},
			onShowDatePicker(val) { //显示
				switch (val) {
					case 1:
						this.ms1showPicker = true;
						break;
					case 2:
						this.ms2showPicker = true;
						break;
					case 3: // 预购时间
						this.ygshowPicker = true;
						break;
					default:
						break;
				}
			},
			onSelected(e, val) { //选择日期
				switch (val) {
					case 1:
						this.ms1showPicker = false;
						this.startText = e.value;
						break;
					case 2:
						this.ms2showPicker = false;
						this.endText = e.value;
						break;
					case 3:
						this.ygshowPicker = false;
						this.deliverytime = e.value;
						break;
					default:
						break;
				}
			},

			checkboxChange(e) { // 商品简介框的点击
				let items = this.checkList;
				let values = e.detail.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.name)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			async searchFoods() { // 查询商品
				if (this.productId) {
					let a = await this.$http.searchFoods({
						productId: this.productId
					});
					if (a.code == 200) {
						this.cateId = a.data['procate']
						this.prodesc = a.data['proname']
						this.count = a.data['nowprice']
						this.originPrice = a.data['preprice']
						this.rebate = a.data['discount']
						this.LL.longitude = a.data['lng']
						this.LL.latitude = a.data['lat']
						this.goodsImgList = a.data['proimgs']
						this.goodsImgList2 = a.data['product_detail_imgs']
						this.videoList = a.data['video']
						this.checkList = a.data['brief']
						this.limit1 = a.data['everylimit']
						this.limit2 = a.data['orderlimit']

						this.isGift = a.data['addgift'] // 
						this.cateId2 = a.data['sysproid'] // 系统分类 2
						this.cateId1 = a.data['procate'] // 产品分类 1

						this.groupTime = a.data['group_time_limit']
						this.groupNum = a.data['group_member_limit']

						this.startText = a.data['limitbuystarttime']
						this.endText = a.data['limitbuysstoptime']

						this.deliverytime = a.data['deliverytime']

						this.$nextTick(function() { // 图片的双向数据绑定
							let aa = [];
							this.goodsImgList.forEach((item) => {
								aa.push({
									path: item
								})
							})
							this.$refs.upimg.upload_before_list = aa;
							let bb = [];
							this.goodsImgList2.forEach((item) => {
								bb.push({
									path: item
								})
							})
							this.$refs.upimg2.upload_before_list = bb;
							setTimeout(() => {
								this.select1(this.cateId1);
								this.select2(this.cateId2);
							}, 700)
						})


						return
					}
					uni.showToast({
						title: a.message,
						icon: 'none'
					})
				}
			},
			async onConfirm() { // 确认发布
				let val = {
					sysproid: this.cateId2,
					procate: this.cateId1,
					proname: this.prodesc,
					nowprice: this.count, // 现价
					preprice: this.originPrice, //
					discount: this.rebate,
					lng: this.LL.longitude || '',
					lat: this.LL.latitude || '',
					proimgs: this.goodsImgList,
					product_detail_imgs: this.goodsImgList2,
					video: this.videoUrls,
					brief: this.checkList,
					isdisplay: 0, // 是否上架，不用管，如果报错的话，传个0
					everylimit: this.limit1,
					orderlimit: this.limit2,
					addgift: this.isGift, // 满赠 1 是 2 否
					distype: this.distype, // 优惠方式
					limitbuystarttime: this.startText, //
					limitbuysstoptime: this.endText, // 
					group_time_limit: this.groupTime,
					group_member_limit: this.groupNum,
					deliverytime: '', // 预购发货时间
					productId: this.productId,
				}
				console.log(val);
				// return
				let a;
				if (this.productId) {
					a = await this.$http.prodectEdit(val);

				} else {
					a = await this.$http.storeAdd(val);
				}

				if (a.code == 200) {
					uni.showToast({
						title: a.message
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/myStore/myStore'
						})
					}, 500);
					return
				}
				uni.showToast({
					title: a.message,
					icon: 'none'
				})
			},

			async getCate(cateId) { //获取分类的
				let a = await this.$http.getTypeCate({
					type: cateId
				})
				if (cateId == 1) {
					this.cate2 = a.data // 分类2
					return
				}
				this.cate1 = a.data // 分类1
			},

			select1(cateid) { //分类1的选择
				this.cate1.forEach((item) => {
					if (item.cateid == cateid) {
						this.catename1 = item.catename;
						this.cateId1 = cateid
						return
					}
				})
			},
			select2(cateid) { // 分类2的选择
				this.cate2.forEach((item) => {
					if(cateid == 1) { // 9.9专区 限制 金额的输出
						this.fiveFlag  = true;
					}else{
						this.fiveFlag  = false;
					}
					if (item.cateid == cateid) {
						this.catename2 = item.catename;
						this.cateId2 = cateid
						return
					}
				})

				switch (cateid) {
					case 8:
						this.distype = 4;
						break;
					case 5:
						this.distype = 1;
						break;
					case 19:
						this.distype = 3;
						break;
					case 20:
						this.distype = 2;
						break;
					default:
						this.distype = 0;
						break;
				}
				console.log(this.cateId2, this.catename2)
			},

			navTo(url) { // nav路由跳转
				uni.navigateTo({
					url: url
				})
			},
			zkBlur() { // 折扣输入框的处理
				if(this.rebate.length != 0) {
					if(Number(this.rebate) <= 0 || Number(this.rebate) >= 10) {
						uni.showToast({
							title: '折扣不合理，请重新输入~~',
							icon: 'none'
						})
						this.rebate = ''
						return
					}
					this.count = ((Number(this.rebate) * 100)  * (Number(this.originPrice) * 100)) / 100000;
				}
			},

			imgStyle() {
				return this.goodsImgList.length * 112 + 'upx'
			},

			removeVideo(index) { // 移除视频
				this.videoList.splice(index, 1)
			},
			goodVideo() { //选择视频
				if (this.videoList.length >= 1) {
					uni.showToast({
						title: '你已经添加过了',
						icon: 'none'
					})
					return
				};
				var _self = this;
				console.log(_self.$common.baseUrl.setUploadImg);
				uni.chooseVideo({
					count: 1,
					sourceType: ['album'],
					success: function(res1) {
						_self.videoList.push(res1.tempFilePath);
						uni.uploadFile({ //上传视频
							url: _self.$common.baseUrl.setUploadImg,
							filePath: res1.tempFilePath,
							name: 'file',
							success: (res) => {
								if (res.statusCode !== 200) {
									_self.videoUrls = []
									return
								}
								res = JSON.parse(res.data)
								if (res.code == 200) {
									_self.videoUrls.push(res.data.file)
									console.log(_self.videoUrls)
								}
							}
						});
					}
				});
			},

			sendChange() { // 是否参与满赠
				if (this.ischecked == false) {
					this.ischecked = true
				} else {
					this.ischecked = false
				}
			},


			chooseImage(val) { // 选择图片
				if (val == 0) {
					if (this.goodsImgList.length >= 8) {
						uni.showToast({
							title: '最多只能添加8张',
							icon: 'none'
						})
						return;
					};
					this.$refs.upimg.chooseImage();
				} else {
					if (this.goodsImgList2.length >= 8) {
						uni.showToast({
							title: '最多只能添加8张',
							icon: 'none'
						})
						return;
					};
					this.$refs.upimg2.chooseImage();
				}
			},
			getImageInfo(e) { //获取上传后的url，发生改变时候触发
				this.goodsImgList = e;
			},
			getImageInfo2(e) { //获取上传后的url，发生改变时候触发
				this.goodsImgList2 = e;
			},
		},
	}
</script>
<style lang="scss" scoped>
	@import 'static/css/myStore.scss';
</style>
